<template>
  <el-card class="box-card">
    <div class="card-header">
      <h3>订单详情</h3>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div><strong>订单编号：</strong>{{ orderDetails.orderNumber || '暂无' }}</div>
        <div><strong>充电桩编号：</strong>{{ orderDetails.pileCode || '暂无' }}</div>
        <div><strong>充电站名称：</strong>{{ orderDetails.stationName || '暂无' }}</div>
        <div><strong>充电状态：</strong>{{ orderDetails.chargingStatus || '未知状态' }}</div>
        <div><strong>支付状态：</strong>{{ orderDetails.paymentStatus || '未知状态' }}</div>
      </el-col>
      <el-col :span="12">
        <div><strong>交易金额：</strong>¥{{ orderDetails.transactionAmount || '0.00' }}</div>
        <div><strong>备注：</strong>{{ orderDetails.remark || '暂无备注' }}</div>
        <div><strong>创建时间：</strong>{{ orderDetails.createTime || '暂无' }}</div>
        <div><strong>更新时间：</strong>{{ orderDetails.updateTime || '暂无' }}</div>
      </el-col>
    </el-row>
    <el-button class="back-button" type="primary" @click="goBack">返回</el-button>
  </el-card>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  name: 'OrderDetails',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const orderDetails = ref({}); // 存放订单详情

    // 获取订单编号
    const orderNumber = route.params.orderNumber;

    // 获取订单详情
    const fetchOrderDetails = async () => {
      try {
        const response = await axios.get(`/transaction/details/${orderNumber}`);
        orderDetails.value = response.data || {};
      } catch (error) {
        ElMessage.error('获取订单详情失败，请稍后重试');
      }
    };

    // 返回上一页
    const goBack = () => {
      router.back();
    };

    // 页面加载时获取订单详情
    onMounted(() => {
      fetchOrderDetails();
    });

    return {
      orderDetails,
      goBack,
    };
  },
};
</script>

<style scoped>
.box-card {
  margin: 20px;
}

.card-header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.back-button {
  margin-top: 20px;
  width: 100%;
}
</style>
